<!--
 * @Author: your name
 * @Date: 2021-10-04 16:14:29
 * @LastEditTime: 2021-10-13 20:01:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3.0\vue3_vite\src\pages\Ref_learn\Ref1.vue
-->
<template>
  <div>
    <h1>
      ref
    </h1>

    <a-typography> 

      <a-typography-title>count</a-typography-title>
      <a-typography-paragraph>
        <p>{{ count }}</p>
        <a-space>
          <a-button type="primary" @click="changeCount('add')">增加</a-button>
          <a-button type="primary" @click="changeCount('reduce')">减少</a-button>  
        </a-space>  
      </a-typography-paragraph> 

      <a-typography-title>count2</a-typography-title>
      <a-typography-paragraph>
        <p>{{ count2 }}</p>
        <a-space>
          <a-button type="primary" @click="changeCount2('add')">增加</a-button>
          <a-button type="primary" @click="changeCount2('reduce')">减少</a-button>  
        </a-space>  
      </a-typography-paragraph> 
      
    </a-typography>
  
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup(props) {
    const count = ref(0)
    const changeCount = (type) => {
      if (type === 'add') {
        count.value ++
      } else {
        count.value --
      }
    }

    let count2 = 0
    const changeCount2 = (type) => {
      if (type === 'add') {
        count2 ++
      } else {
        count2 --
      }
      console.log(count2)
    }
    
    return {
      count,
      count2,

      changeCount,
      changeCount2,
    }
  }
}
</script>

<style>

</style>